<template>
	<view class="page">
		<image src="../../static/register/top2.jpg" mode="widthFix" class="top" />
		<view class="location-container">
			<view class="left">
				<image src="../../static/register/location.png" mode="widthFix" class="location"></image>
				<text>代驾服务地点</text>
			</view>
			<view class="right">{{cityName}}</view>
		</view>
		<view class="info-container">
			<view class="title-container">
				<image src="../../static/register/title-bg.png" mode="widthFix" class="title-bg"></image>
				<text class="title">入驻条件</text>
			</view>
			<view class="list">
				<view class="item">
					<text>1.</text>
					三年安全驾驶经验；
				</view>
				<view class="item">
					<text>2.</text>
					年龄23~55周岁；
				</view>
				<view class="item">
					<text>3.</text>
					无违法犯罪记录、无精神病史、无吸毒史，以及平台认为不适合代驾的其他历史证明；
				</view>
				<view class="item">
					<text>4.</text>
					有熟练驾车经验；
				</view>
				<view class="item">
					<text>5.</text>
					身体健康，无肢体残疾和大面积纹身；
				</view>
				<view class="item">
					<text>6.</text>
					需要提供身份证、驾驶证、直系亲属联系方式，并保存前述材料的真实合法性；
				</view>
			</view>
		</view>
		<view class="info-container">
			<view class="title-container">
				<image src="../../static/register/title-bg.png" mode="widthFix" class="title-bg"></image>
				<text class="title">入驻流程</text>
			</view>
			<view class="list">
				<view class="complex-item">
					<view class="left">01</view>
					<view class="right">
						<text class="item-title">在线注册账号</text>
						<text class="item-desc">在小程序完成注册</text>
					</view>
				</view>
				<view class="complex-item">
					<view class="left">02</view>
					<view class="right">
						<text class="item-title">司机信息填写</text>
						<text class="item-desc">按照流程提交本人身份证、驾驶证</text>
					</view>
				</view>
				<view class="complex-item">
					<view class="left">03</view>
					<view class="right">
						<text class="item-title">证件资料审核</text>
						<text class="item-desc">对提交证件进行审核</text>
					</view>
				</view>
				<view class="complex-item">
					<view class="left">04</view>
					<view class="right">
						<text class="item-title">签署合同</text>
						<text class="item-desc">收到邮寄的合同后必须本人签署并寄回</text>
					</view>
				</view>
			</view>
		</view>
		<button class="btn" @tap="wxRegister">司机注册</button>
		<!-- <button class="btn" open-type="getPhoneNumber" @getphonenumber="phoneRegister">司机注册</button> -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	var QQMapWX = require('../../lib/qqmap-wx-jssdk.min.js');
	var qqmapsdk; // 定义一个接收开发密钥的属性
	export default {
		data() {
			return {
				code: null,
				cityName: "未知"
			};
		},
		// 页面加载时候就执行
		onLoad() {
			// 在函数中this的指向有时候不是一个vue实例，所以需要定义一下
			const _this = this;
			// 因为在getCityName方法里面需要获取qqmapsdk，所以要把initQQmapsdk方法放在getCityName放在方法前面
			_this.initQQmapsdk();
			location = _this.getLocation();
			_this.getCityName();
		},
		methods: {
			// 司机注册并获取手机号的方法
			phoneRegister(e) { // 参数里面就包含了	code
				uni.removeStorageSync("tokenName");
				uni.removeStorageSync("tokenValue");
				uni.removeStorageSync("permissions");
				uni.removeStorageSync("loginInfoDto");
				const _this = this;
				let phoneCode = e.detail.code
				wx.login({
					success(res) { // res就相当于传递的参数
						if (res.code && phoneCode) { // 判断是否包含code和phoneCode
							// 发送get请求传递code给后端，方便后端根据code去解析openid和phoneCode获取手机号
							_this.get("/driver/app/driver/register/" + res.code + "/" + phoneCode, (resp) => {
								if (resp.success) {
									// 发送成功后提示信息停留2秒
									uni.showToast({
										icon: "success",
										title: "注册成功",
										duration: 2000
									})
									// 2秒后执行定时器，跳转到登录界面
									setTimeout(function() {
										uni.navigateTo({
											url: "/pages/login/login"
										})
									}, 2000)

								} else {
									// 发送失败提示后端的友好提示语
									uni.showToast({
										icon: "error",
										title: resp.message,
									})
								}
							})
						} else {
							uni.showToast({
								icon: "error",
								title: "获取不到信息",
							})
						}
					}
				})
			},
			// 点击司机注册执行的方法：获取code并传递参数给后端解析
			wxRegister() {
				const _this = this;
				uni.removeStorageSync("tokenName");
				uni.removeStorageSync("tokenValue");
				uni.removeStorageSync("permissions");
				uni.removeStorageSync("loginInfoDto");
				wx.login({
					success(res) {
						if (res.code) {
							// 发送get请求传递code给后端，方便后端根据code去解析openid
							_this.get("/driver/app/driver/register/" + res.code, (resp) => {
								if (resp.success) {
									// 发送成功后提示信息停留2秒
									uni.showToast({
										icon: "success",
										title: "注册成功",
										duration: 2000
									})
									// 2秒后执行定时器，跳转到登录界面
									setTimeout(function() {
										uni.navigateTo({
											url: "/pages/login/login"
										})
									}, 2000)

								} else {
									// 发送失败提示后端的友好提示语
									uni.showToast({
										icon: "error",
										title: resp.message,
									})
								}
							})
						} else {
							uni.showToast({
								icon: "error",
								title: "获取不到信息",
							})
						}
					}
				})
			},
			getLocation() { // 获取经纬度
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						console.log('当前位置的经度：' + res.longitude);
						console.log('当前位置的纬度：' + res.latitude);
						return res;
					}
				});

			},
			initQQmapsdk() { // 获取开发密钥
				qqmapsdk = new QQMapWX({
					key: "555BZ-T5QWJ-VYNFA-DY6G3-6TF67-3OBCD" // 就是微信公众平台的应用key
				});
			},
			// 逆地址解析，根据坐标获取所在的城市
			getCityName(location) { // 需要传递一个经纬度
				const _this = this;
				qqmapsdk.reverseGeocoder({ // 执行逆解析方法
					location: location,
					success: function(res) { //成功后的回调
						console.log(res);
						// 状态码，0为正常,
						// 310请求参数信息有误，
						// 311Key格式错误,
						// 306请求有护持信息请检查字符串,
						// 110请求来源未被授权
						if (res.status == 0) { // 如果回调后的状态码为0说明获取地址成功
							_this.cityName = res.result.address_component.city // 设置获取的城市名称
						} else {
							uni.showToast({ // 如果回调后的状态码不为0说明获取地址失败
								icon: "error",
								title: "地址获取失败，请稍后再试！"
							})
						}
					}
				});
			}
		}
	}
</script>

<style lang="less">
	@import url('register.less');
</style>